<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form ref="dataForm" :model="dataForm" size="mini" :rules="dataRule" label-width="80px">
      <el-form-item label="所属分类" prop="goodscatpath">
        <el-cascader
          v-model="dataForm.goodscatpath"
          style="width: 100%"
          clearable
          :props="props"
          :options="typeoptions"
        />
      </el-form-item>
      <el-form-item label="属性名称" prop="attrname">
        <el-input v-model="dataForm.attrname" placeholder="" />
      </el-form-item>
      <el-form-item label="属性类型" prop="attrtype">
        <el-select v-model="dataForm.attrtype" placeholder="请选择属性类型" style="width:100%">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="属性值" prop="attrvalue">
        <div class="container">
          <el-tag
            v-for="attrVal in dataForm.goodsAttributesValues"
            :key="attrVal.id"
            :closable="true"
          >
            {{ attrVal.name }}
          </el-tag>
          <el-input
            v-if="inputVisible"
            v-model="dataForm.templatevalue"
            class="input-new-tag"
            size="small"

            type="success"
            @blur="addAttrValue"
          />
          <el-button v-else class="button-new-tag" :height="28" size="small" @click="showInput">新建</el-button>
        </div>
      </el-form-item>
      <el-row>
        <el-col>
          <!--
          <el-tag
            v-for="val in dataForm.goodsAttributesValues"
            :key="val.id"
            closable
            :disable-transitions="false"
            @close="handleClose(val)"
            @click="handUpdate(val)"
          >
            {{ val.name }}
          </el-tag>
          <el-input
            v-if="tag.inputVisible"
            :id="tag.Id"
            v-model="tag.templatevalue"
            class="input-new-tag "
            size="small"
            @keyup.enter.native="handleInputConfirm(tag)"
            @blur="handleInputConfirm(tag)"
          />
          <el-button v-else class="button-new-tag" size="small" @click="showInput(tag)">新建</el-button>
        -->
        </el-col>
      </el-row>
      <el-form-item label="排序" prop="attrsort">
        <el-input v-model="dataForm.attrsort" placeholder="" />
      </el-form-item>
      <el-form-item label="是否显示" prop="isshow">
        <el-select v-model="dataForm.isshow" placeholder="请选择是否显示" style="width:100%">
          <el-option
            v-for="item in shopOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="visible = false">取消</el-button>
      <el-button size="mini" type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { treeDataTranslate } from '@/utils'
export default {
  data() {
    return {
      // 设置类型
      options: [{
        value: 0,
        label: '输入框'
      }, {
        value: 1,
        label: '下拉列表'
      }, {
        value: 2,
        label: '标签'
      }],
      // 设置分类
      props: { multiple: true },
      typeoptions: [],
      // 设置是否显示
      shopOptions: [
        {
          value: 0,
          label: '是'
        }, {
          value: 1,
          label: '否'
        }
      ],
      visible: false,
      inputVisible: false,
      templatevalue: '',
      dataForm: {
        attrid: 0,
        goodscatpath: [],
        goodsAttributesValues: [],
        attrname: '',
        attrtype: '',
        attrval: '',
        attrsort: '',
        isshow: ''
      },
      dataRule: {
        goodscatpath: [
          { required: true, message: '所属分类不能为空', trigger: 'blur' }
        ],
        attrname: [
          { required: true, message: '属性名称不能为空', trigger: 'blur' }
        ],
        attrtype: [
          { required: true, message: '属性类型不能为空', trigger: 'blur' }
        ],
        attrsort: [
          { required: true, message: '排序不能为空', trigger: 'blur' }
        ],
        isshow: [
          { required: true, message: '是否显示不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init(id) {
      const _that = this
      _that.dataForm.attrid = id || 0
      _that.visible = true
      _that.$nextTick(() => {
        _that.$refs['dataForm'].resetFields()
        _that.dataForm.goodsAttributesValues = []
        // 商品分类
        _that.$http({
          url: _that.$http.adornUrl('/goods/cats/dorpdownlist'),
          method: 'get',
          params: _that.$http.adornParams({
            'parentId': 0
          })
        }).then(({ data }) => {
          if (data && data.list != null && data.list.length > 0) {
            var lst = []
            for (var i = 0; i < data.list.length; i++) {
              lst.push({
                value: data.list[i].catid,
                parentid: data.list[i].parentid,
                label: data.list[i].catname
              })
            }
            _that.typeoptions = treeDataTranslate(lst, 'value', 'parentid')
          }
          if (_that.dataForm.attrid) {
            _that.$http({
              url: _that.$http.adornUrl(`/goods/attributes/info/${_that.dataForm.attrid}`),
              method: 'get',
              params: _that.$http.adornParams()
            }).then(({ data }) => {
              if (data && data.code === 0) {
                _that.dataForm.attrname = data.goodsAttributesSetting.attrname
                _that.dataForm.attrtype = data.goodsAttributesSetting.attrtype
                _that.dataForm.attrval = data.goodsAttributesSetting.attrval
                _that.dataForm.attrsort = data.goodsAttributesSetting.attrsort
                _that.dataForm.isshow = data.goodsAttributesSetting.isshow
                const lstAttrs = data.goodsAttributesSetting.lstVal
                if (lstAttrs) {
                  _that.dataForm.goodsAttributesValues = lstAttrs
                }

                const attrCats = data.goodsAttributesSetting.goodscatpath
                // this.dataForm.goodscatpath = data.goodsAttributesSetting.goodscatpath
                if (attrCats) {
                  const cats = []
                  attrCats.forEach((data, index) => {
                    cats.push(data.split('__'))
                  })
                  _that.dataForm.goodscatpath = cats
                }
              }
            })
          }
        })
      })
    },
    // 显示输入框
    showInput() {
      const _this = this
      _this.inputVisible = true
    },
    // 增加值到列表中
    addAttrValue() {
      const _this = this
      const attr = {
        name: this.dataForm.templatevalue,
        id: 0
      }
      _this.dataForm.goodsAttributesValues.push(attr)
      _this.dataForm.templatevalue = ''
      _this.inputVisible = false
    },
    // 表单提交
    dataFormSubmit() {
      const _this = this
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const cats = []
          if (_this.dataForm.goodscatpath) {
            _this.dataForm.goodscatpath.forEach((value, index) => {
              if (value) {
                cats.push(value.join('__'))
              }
            })
          }
          this.$http({
            url: this.$http.adornUrl(`/goods/attributes/${!this.dataForm.attrid ? 'save' : 'update'}`),
            method: 'post',
            data: this.$http.adornData({
              'attrid': this.dataForm.attrid || undefined,
              'goodscatpath': cats,
              'attrname': this.dataForm.attrname,
              'attrtype': this.dataForm.attrtype,
              'attrval': this.dataForm.attrval,
              'attrsort': this.dataForm.attrsort,
              'isshow': this.dataForm.isshow,
              'lstVal': this.dataForm.goodsAttributesValues
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  }
}
</script>
<style scoped>
.container span {
  line-height: 28px;
  height: 28px;
  border: 1px;
}
  .container .el-tag {
    margin-right: 10px;
  }
  .container .button-new-tag {
    height: 26px;
    line-height: 26px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .container .input-new-tag {
    width: 90px;
    vertical-align: middle;
  }
</style>
